<template>
    <div style="background-color:#f7f7f7;width:390px;height:844px;">
       <div style="background-color:white;height:230px;">
            <div style="display:flex;width:360px;margin-left:15px;margin-top:20px;margin-bottom:15px;">
                <p><el-icon @click="onClickLeft"><ArrowLeft  size="25"/></el-icon></p>
                <p style="margin-left:135px">预约看房</p>
            </div>
            <div style="width:360px;margin-left:15px;display:flex;margin-bottom:5px;">
                <div>
                    <img src="https://cdn8.axureshop.com/demo2024/2266108/images/%E6%9C%AA%E9%A2%84%E7%BA%A6%E7%9C%8B%E6%88%BF/u591.svg" @click="router.push('/xiang')">
                </div>
                <div style="margin-left:15px;">
                    <p style="font-size: 13px;font-weight:700;margin-top:-2px">整租 | 实图真价 福田金地大百汇...</p>
                    <p style="font-size: 12px;color:gray;">2室 78m*彩天名苑 岗夏</p>
                    <p style="margin-top:-5px;">
                        <span style="color:gray;font-size: 14px;">7000元/月</span>
                        
                    </p>
                </div>
            </div>
            <div style="width:360px;height:60px;margin-left:15px;display:flex;background-color:#fafafa;border-radius:13px;">
            <div style="margin-top:10px;margin-left:15px"><img src="https://cdn8.axureshop.com/demo2024/2266108/images/%E6%9C%AA%E9%A2%84%E7%BA%A6%E7%9C%8B%E6%88%BF/u594.svg"></div>
            <div>
                <p style="font-size:13px;font-weight:400;margin-left:15px;">李小红女士
                    <br><span style="font-size:11px;color:gray;">个人房东</span>
                </p>
                
            </div>
            <div>
                <p style="font-size:11px;color:gray;margin-top:30px;margin-left:125px;">信用良好 70分</p>
            </div>
        </div>
        
       </div>
       <div style="background-color:white;width:390px;height:600px;margin-top:10px;">
           <div style="width:360px;margin-left:15px;">
            <p style="padding-top:15px;">预约信息</p>
           
           </div>
           <div>
            <van-steps direction="vertical" :active="0">
  <van-step>
    <h3>预约已完成</h3>
    <p>2016-07-11 10:50</p>
  </van-step>
  <van-step>
    <h3>已看房</h3>
    <p>2016-07-11 10:00</p>
  </van-step>
  <van-step>
    <h3>已接受</h3>
    <p>2016-07-10 09:31</p>
  </van-step>
  <van-step>
    <h3>发起预约</h3>
    <p>2016-07-10 09:30</p>
  </van-step>
</van-steps>
           </div>
           <div style="width:360px;margin-left:15px;display:flex;margin-top:10px">
                <div>
                    <el-icon size="20" style="margin-left:10px"><Clock  /></el-icon>
                    <p style="font-size:10px;margin-top:-2px" @click="router.push('/yuyue')">再次预约</p>
                </div>
                <div style="margin-left:20px;">
                    <el-button type="primary" style="width:300px;height:35px;background-color:#efefef;color:#d7d7d7;border:1px solid #efefef">确认已看房</el-button>
                </div>


           </div>
        </div>
    </div>
  </template>
  
  <script setup lang="ts" >
import { Icon, NavBar  } from 'vant';
import {ref,computed, onMounted} from 'vue'
import axios from 'axios'
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
const router=useRouter()
const onClickLeft = () => history.back()
  </script>
  
  <style>
  
  </style>